<template>
  <div class="app-container">
    <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <el-row>
          <!-- <el-button type="danger" @click="handleDeleteAll">批量删除</el-button> -->
          <el-form
            :inline="true"
            :model="listQuery"
            ref="listQuery"
            class="demo-form-inline"
          >
            <el-form-item label="">
              <el-input
                type="text"
                v-model="listQuery.nickname"
                placeholder="请输入名称查询"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchSubmit">查询</el-button>
              <el-button type="primary" @click="resetSubmit">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <div class="item" v-loading="listLoading">
        <el-table
            ref="dataList"
            :data="menuList"
            @selection-change="handleSelectionChange"
            style="width: 100%; margin-bottom: 20px"
            row-key="id"
            border
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="weeks" label="期数ID"> </el-table-column>
            <el-table-column prop="period" label="期数"> </el-table-column>
            <el-table-column prop="nickname" label="周星昵称"> </el-table-column>
            <el-table-column prop="head_picture" label="头像">
                <template slot-scope="scope">
                    <el-popover placement="right" max-width="420" trigger="hover">
                        <img :src="scope.row.head_picture" alt="" style="max-width: 200px;max-height: 200px">
                        <img slot="reference" :src="scope.row.head_picture" alt="" style="width: 50px;">
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="total" label="周星值"></el-table-column>
            <el-table-column prop="sociaty" label="公会"> </el-table-column>

            <!-- <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        type="danger"
                        size="mini"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        plain
                        >删除</el-button
                    >
                </template>
            </el-table-column> -->
        </el-table>
        <!-- 分页 -->
        <cus-pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.perPage"
        @pagination="getList"
        />
      </div>
    </el-card>
    <!-- 删除弹框 -->
    <el-dialog
      title="确定删除吗?"
      :visible.sync="deleteDialogVisible"
      width="435px"
    >
      <span style=""
        ><em style="font-style: normal; color: red">删除后不可恢复</em
        >，你还要继续吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listData,
} from "@/api/starWeek/previousList";
export default {
  data() {
    return {
      activeName:'1',
      week:1,

      deleteDialogVisible: false,
      listLoading: false,
      menuList: [],
      limitList: [],
      listQuery: {
        page: 1,
        perPage: 10,
        nickname: undefined,
      },
      total: 0,
      // 勾选内容
      multipleSelection: [],
      // 要删除的内容的ids
      dataIds: "",
    };
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true;
      let urlData = "?";
      if (this.listQuery.page) {
        urlData = urlData + `page=${this.listQuery.page}&`;
      }
      if (this.listQuery.perPage) {
        urlData = urlData + `perPage=${this.listQuery.perPage}`;
      }
      if (this.listQuery.nickname) {
        urlData = urlData + `&nickname=${this.listQuery.nickname}`;
      }
      listData(urlData).then((response) => {

        this.menuList = response.data.data;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    searchSubmit() {
      this.listQuery.page = 1;
      this.getList();
    },
    resetSubmit() {
      this.listQuery.page = 1;
      this.listQuery.perpage = 10;
      this.listQuery.nickname = undefined;
    },
    handleChangeWeek(type){
        if(type === this.week) return
        this.week = type
    },

    handleTabClick(){

    },


    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 点击单个删除
    handleDelete(row) {
      this.dataIds = { ids: `${row.id}` };
      this.deleteDialogVisible = true;
    },
    // 点击批量删除
    handleDeleteAll() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: "请先勾选要删除的内容",
          type: "warning",
        });
        return;
      } else if (this.multipleSelection.length !== 0) {
        let ids = "";
        for (let key in this.multipleSelection) {
          ids += `${this.multipleSelection[key].id},`;
        }
        ids = ids.substring(0, ids.length - 1);
        this.dataIds = { ids: ids };
      }
      this.deleteDialogVisible = true;
    },
    // 确定删除
    confirmDelete() {
      // this.deleteDialogVisible = false;
      deleteData(this.dataIds).then((response) => {

        if (response.code === 200) {
          this.getList();
          this.deleteDialogVisible = false;
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000,
          });
        } else {
          this.$message({
            message: response.message,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  float: right;
}

/deep/ .el-card__header {
  padding-bottom: 0;
}

/deep/.el-range-separator {
  width: 30px;
}
</style>
